<template>
  <div class="monitor-container">
    <search
      @search="handleSearch"
      ref="searchRef"
    >
      <template slot="right">
        <span class="online-number">
          <i class="el-icon-user-solid"></i>
          <span>在线用户数：</span>
          <span class="online-number-num">{{onlineUserCount}}</span>
        </span>
      </template>
    </search>

    <customEcharts
      :id="'pie-statistics'"
      :option="pieOption"
      echartTitle=""
      v-loading="loading"
    ></customEcharts>

    <customEcharts
      :id="'bar-statistics'"
      :option="barOption"
      echartTitle=""
      v-loading="loading"
      :canClick="true"
      @click="handleBarClick"
    ></customEcharts>

    <customEcharts
      :id="'line-statistics'"
      :option="lineOption"
      echartTitle=""
      v-loading="trendLoading"
      :noDataTip="trendTip"
    >
      <div slot="right">
        <el-select
          v-model="lineSearch.deptSelected"
          placeholder="请选择"
          clearable
          @change="handleLineSearch"
        >
          <el-option
            v-for="item in barXaxis"
            :key="item.orgCode"
            :label="item.xaxisname"
            :value="item.orgCode"
          >
          </el-option>
        </el-select>
      </div>
    </customEcharts>
  </div>
</template>
 
<script>
import customEcharts from '../components/customEcharts'
import search from '../components/search'
import { systomLoginInfo, systomLoginTrend } from '@/api/monitorManage/index'
import { filterStatisticZero, pidEchartSeries, barEchartSeries, lineEchartSeries } from '@/utils/statistic'
export default {
  name: 'System-statistics',
  // 组件
  components: { customEcharts, search },
  data() {
    return {
      form: {
        value: '',
        time: []
      },
      pieOption: {},
      barXaxis: [],
      barOption: {},
      lineSearch: {
        deptSelected: '',
        dept: '',
        flag: ''
      },
      lineOption: {},
      loading: false,
      trendLoading: false,
      trendTip: '',
      onlineUserCount: 0
    }
  },
  mounted() {
    this.$nextTick(function () {
      this.$refs.searchRef.onSubmit()
    })
  },
  methods: {
    handleSearch(searchKeys, searchOpts) {
      const { time, value: orgCode } = searchKeys

      this.form.time = time
      this.form.value = orgCode

      this.lineSearch.deptSelected = ''
      this.lineSearch.dept = orgCode
      this.lineSearch.flag = orgCode ? 'base' : ''
      const params = {
        orgCode: orgCode,
        startDate: this.form.time[0] || '',
        endDate: this.form.time[1] || ''
      }
      this.loading = true
      this.trendLoading = true
      systomLoginInfo(params)
        .then((response) => {
          if (response) {
            this.onlineUserCount = response.total?.onlineUserCount || 0
            // 渲染饼图和柱状图
            this.getLoginOption(response.loginCount || [])
            this.getPieOption(response.total || {})
            // 请求趋势图数据
            this.getLoginTrendData()
          } else {
            this.onlineUserCount = 0
            this.getLoginOption([])
            this.getPieOption({})
          }
          this.loading = false
        })
        .catch(() => {
          this.onlineUserCount = 0
          this.getLoginOption([])
          this.getPieOption({})
          this.loading = false
          this.trendLoading = false
        })
    },
    handleLineSearch(value) {
      if (value) {
        this.lineSearch.flag = this.form.value ? 'department' : 'base'
      } else {
        this.lineSearch.flag = this.form.value ? 'base' : ''
      }
      this.lineSearch.dept = value || ''
      this.getLoginTrendData()
    },
    getLoginTrendData() {
      this.trendTip = ''
      this.trendLoading = true
      const { time, value } = this.form
      const { dept, flag } = this.lineSearch
      let params = {
        orgCode: dept || value,
        startDate: time[0] || '',
        endDate: time[1] || '',
        flag
      }
      if (!params.startDate || !params.endDate) {
        this.getLineOption({})
        this.trendTip = '请选择时间范围'
        this.trendLoading = false
        return
      }
      systomLoginTrend(params)
        .then((res) => {
          this.getLineOption(res)
          this.trendLoading = false
        })
        .catch(() => {
          this.trendLoading = false
        })
    },
    getPieOption(obj) {
      const seriesData = [
        pidEchartSeries({
          name: '',
          data: [
            {
              name: 'APP登录人次',
              value: obj.appTotal
            },
            {
              name: 'PC端登录人次',
              value: obj.pcTotal
            }
          ],
          radius: [0, '68%']
        })
      ]

      this.pieOption = {
        color: ['#F9C78B', '#F39423'],
        legend: {
          data: ['APP登录人次', 'PC端登录人次'],
          left: 'left'
        },
        series: seriesData
      }
    },
    getLoginOption(loginCount) {
      // 过滤为0的数据
      loginCount = filterStatisticZero(loginCount, ['number'])
      // 更新趋势图下拉框选值
      this.barXaxis = [...loginCount]

      if (!loginCount?.length) {
        this.barOption = {}
        return
      }
      const seriesData = [
        barEchartSeries({
          name: '登录次数',
          data: loginCount.map((ele) => ele.number)
        })
      ]
      this.barOption = {
        color: ['#F39423'],
        legend: {
          data: seriesData.map((ele) => ele.name)
        },
        xAxis: [
          {
            data: loginCount.map((ele) => ele.xaxisname)
          }
        ],
        series: seriesData
      }
    },
    getLineOption(lineCount) {
      if (!lineCount || JSON.stringify(lineCount) === '{}') {
        this.lineOption = {}
        return
      }
      const seriesData = [
        lineEchartSeries({
          name: '登录次数',
          data: Object.values(lineCount)
        })
      ]
      this.lineOption = {
        color: ['#F39423'],
        legend: {
          data: seriesData.map((ele) => ele.name)
        },
        xAxis: [
          {
            axisLabel: {
              interval: null
            },
            data: Object.keys(lineCount)
          }
        ],
        series: seriesData
      }
    },
    handleBarClick({ dataIndex }) {
      const dept = this.barXaxis[dataIndex]?.orgCode || ''
      this.lineSearch.deptSelected = dept
      this.handleLineSearch(dept)
    }
  }
}
</script>
 
<style scoped lang="less">
.monitor-container {
  display: flex;
  flex-direction: column;
}
.search-content {
  position: relative;
}
.online-number {
  position: absolute;
  right: 15px;
  top: 6px;
  font-size: 17px;
  color: #f99c34;
  &-num {
    font-weight: 600;
  }
  i {
    margin-right: 5px;
  }
}
</style>